<template>
	<view class="container">
		<!--内容部分-->
		<tui-list-view class="tui-list-view">
			<tui-list-cell @click="otDetail(1)" :arrow="true" class="tui-list">
				<tui-icon name="house" :size="30" color="#5677FC"></tui-icon>
				<text class="tui-list-cell-name">广场</text>
				<tui-badge class="tui-right" type="red" style="color: white;">&nbsp;</tui-badge>
			</tui-list-cell>
			<tui-list-cell @click="otDetail(2)" :arrow="true" class="tui-list">
				<tui-icon name="explore" :size="30" color="#5677FC"></tui-icon>
				<view class="tui-list-cell-name">社群</view>
				<!-- <view class="tui-right">进入店铺</view> -->
			</tui-list-cell>
		</tui-list-view>

		<tui-list-view class="tui-list-view">
			<tui-list-cell @click="otDetail(3)" :arrow="true" class="tui-list">
				<tui-icon name="gps" :size="30" color="#5677fc"></tui-icon>
				<view class="tui-list-cell-name">附近人</view>
			</tui-list-cell>
			<tui-list-cell @click="otDetail(4)" :arrow="true" class="tui-list">
				<tui-icon name="balloon" :size="30" color="#5677fc"></tui-icon>
				<view class="tui-list-cell-name">附近聚会</view>
				<tui-tag size="small" type="light-green" shape="circle" class="tui-right">探索发现</tui-tag>
			</tui-list-cell>
		</tui-list-view>

		<tui-list-view class="tui-list-view">
			<tui-list-cell @click="otDetail(5)" :arrow="true" class="tui-list">
				<tui-icon name="friendadd" :size="30" color="#5677fc"></tui-icon>
				<view class="tui-list-cell-name">推荐</view>
				<!-- <view class="tui-right">进入店铺</view> -->
			</tui-list-cell>
		</tui-list-view>

		<tui-list-view class="tui-list-view">
			<tui-list-cell @click="toFace" :arrow="true" class="tui-list">
				<tui-icon name="camera" :size="30" color="#5677fc"></tui-icon>
				<view class="tui-list-cell-name">颜值扫描</view>
				<!-- <view class="tui-right">进入店铺</view> -->
			</tui-list-cell>
		</tui-list-view>
		<!--内容部分-->

		<tui-fab :left="left" :right="right" :bottom="bottom" :bgColor="bgColor" :btnList="btnList" @click="onClick"></tui-fab>
	</view>
</template>

<script>
import tuiListView from '@/components/list-view/list-view';
import tuiListCell from '@/components/list-cell/list-cell';
import tuiIcon from '@/components/icon/icon';
import tuiTag from '@/components/tag/tag';
import tuiBadge from '@/components/badge/badge';
import tuiFab from '@/components/tui-fab/tui-fab';
export default {
	components: {
		tuiListView,
		tuiListCell,
		tuiIcon,
		tuiTag,
		tuiBadge,
		tuiFab
	},
	data() {
		return {
			$cdn:this.$cdn,
			left: 80,
			right: 0,
			bottom: 240,
			bgColor: '#5677fc',
			btnList: [
				{
					//图标/图片地址
					imgUrl: "/static/images/discover/wxgroup.png",
					//图片高度 rpx
					imgHeight: 64,
					//图片宽度 rpx
					imgWidth: 64,
					bgColor: '#16C2C2',
					//名称
					text: '社群',
					//字体大小
					fontSize: 28,
					//字体颜色
					color: '#fff'
				},
				{
					//图标/图片地址
					imgUrl: "/static/images/discover/act.png",
					//图片高度 rpx
					imgHeight: 64,
					//图片宽度 rpx
					imgWidth: 64,
					bgColor: '#64B532',
					//名称
					text: '聚会',
					//字体大小
					fontSize: 28,
					//字体颜色
					color: '#fff'
				},
				{
					//图标/图片地址
					imgUrl: "/static/images/discover/plaza.png",
					//图片高度 rpx
					imgHeight: 64,
					//图片宽度 rpx
					imgWidth: 64,
					bgColor: '#FFA000',
					//名称
					text: '动态',
					//字体大小
					fontSize: 28,
					//字体颜色
					color: '#fff'
				}
			]
		};
	},
	methods: {
		// 主item点击事件
		otDetail: function(linkType) {
			switch (linkType) {
				case 1:
					uni.navigateTo({
						url: '/pages/plaza/index'
					});
					break;
				case 2:
					uni.navigateTo({
						url: '/pages/group/group-list'
					});
					break;
				case 3:
					uni.navigateTo({
						url: '/pages/member/member-near-list'
					});
					break;
				case 4:
					uni.navigateTo({
						url: '/pages/act/act-near-list'
					});
					break;
				case 5:
					uni.navigateTo({
						url: '/pages/member/member-list'
					});
					break;
				default:
					break;
			}
		},
		toFace(){
			uni.navigateTo({
				url: '/pages/discover/face_result'
			});
		},
		onClick(e) {
			let index = e.index;
			switch (index) {
				case -1:
					this.tui.toast('您点击了悬浮按钮');
					break;
				case 0:
					uni.navigateTo({
						url: '/pages/group/group-edit'
					});
					break;
				case 1:
					uni.navigateTo({
						url: '/pages/act/act-edit'
					});
					break;
				case 2:
					uni.navigateTo({
						url: '/pages/plaza/publish'
					});
					break;
				default:
					break;
			}
		},
		clipboard: function(data) {
			thorui.getClipboardData(data, res => {
				if (res) {
					this.tui.toast('分享链接已复制');
				} else {
					this.tui.toast('分享链接复制失败');
				}
			});
		},
		toPlazaIndex() {
			uni.navigateTo({
				url: '/pages/plaza/index'
			});
		}
	}
};
</script>

<style>
.container {
	padding-bottom: env(safe-area-inset-bottom);
}

.tui-list-view {
	padding-top: 20upx !important;
}

.tui-list-cell-name {
	padding-left: 20upx;
	vertical-align: middle;
	line-height: 30upx;
}

.tui-list::after {
	left: 94upx !important;
}

.tui-right {
	margin-left: auto;
	margin-right: 34upx;
	font-size: 26upx;
	line-height: 1;
	color: #999;
}

.logo {
	height: 40upx;
	width: 40upx;
}

.tui-flex {
	display: flex;
	align-items: center;
}

.tui-msg-box {
	display: flex;
	align-items: center;
}

.tui-msg-pic {
	width: 100upx;
	height: 100upx;
	border-radius: 50%;
	display: block;
	margin-right: 24upx;
}

.tui-msg-item {
	max-width: 500upx;
	min-height: 80upx;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.tui-msg-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 34upx;
	line-height: 1;
	color: #262b3a;
}

.tui-msg-content {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 26upx;
	line-height: 1;
	color: #9397a4;
}

.tui-msg-right {
	max-width: 120upx;
	height: 88upx;
	margin-left: auto;
	text-align: right;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
}

.tui-msg-right.tui-right-dot {
	height: 76upx;
	padding-bottom: 10upx;
}

.tui-msg-time {
	width: 100%;
	font-size: 24upx;
	line-height: 24upx;
	color: #9397a4;
}

.tui-badge {
	width: auto;
}

.tui-msg::after {
	left: 154upx !important;
}
</style>
